<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间修改</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">    
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/custom.ui.jqgrid.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/style.css" rel="stylesheet">
          
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/i18n/grid.locale-cn.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/minified/jquery.jqGrid.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
<style>
		.jqGrid_wrapper{*+margin-left:270px;}
	
		.lt,.col-sm-3,.col-sm-8{float:left}
		.form-group{*+overflow:hidden;}
		.form-group label{width:31%\9;*+width:20%;text-align:right\9;*+text-align:right;}
		.col-sm-8 .m-t2 {width:30%\9; *+width:24%;}
		.form-group .col-sm-8{width:66%\9;*+width:66%;}
		.form-group .form-control{*+width:95%;}
		.form-control{*+height:22px;}
		#sub{*+margin-right:10px;}
		.input-group .form-control{*+z-index:-1;}
		.upload{*+position:relative;}
		.btn-primary{*+position:absolute;*+left:431px;*+top:-35px;*+z-index:3;}
		.m-t2  label{width:50px\9;*+width:50px;}
		.col-sm-8 .input-group{width:500px;lwidth:494px\9;}
		.input-group .col-md-1{width:44%;width:46%\9;*+width:38%;float:left;*+height:22px;*+line-height:22px;}
		.input-group .input-group-addon{width:36px;width:36px\9;*+width:36px;height:34px;height:34px\9;line-height:22px;line-height:22px\9;*+height:22px;*+line-height:22px;}
		.m-t2 label{*+width:92px;*+text-align:left;}
	</style>
</head>
<body>
<div class="col-sm-12">
    <form class="form-horizontal m-t" id="form" method="post"
          action="${pageContext.request.contextPath}/admin/croom_update.action">
        <input type="hidden" name="sid" value="${cRoom.sid}">
        <div class="form-group">
	        <label class="col-sm-3 control-label"><i class="require">*</i>楼栋:</label>
	        <div class="col-sm-8">
                  <select name="cBuildingId" id="cBuildingId" class="form-control"></select>
             </div>
	    </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>单元:</label>
            <div class="col-sm-8">
                <select name="unitId" id="unitId" class="form-control"></select>
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>所属楼层:</label>
            <div class="col-sm-8">
               <input class="form-control" name="floorNo" id="floorNo"  size="30" value="${cRoom.floor_no}" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>房间号:</label>
            <div class="col-sm-8">
            <input class="form-control" name="roomNo" id="roomNo"  size="30" value="${cRoom.room_no}"/>
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>户主姓名:</label>
            <div class="col-sm-8">
            <input class="form-control" name="ownerName" id="ownerName"  size="30" value="${cRoom.owner_name}"/>
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>户主手机:</label>
            <div class="col-sm-8">
            <input class="form-control" name="ownerTel" id="ownerTel"  size="30" value="${cRoom.owner_tel}"/>
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require"></i>身份证号码:</label>
            <div class="col-sm-8">
            <input class="form-control" name="ownerIdNumber" id="ownerIdNumber" value="${cRoom.owner_id_number}"  size="30" maxlength="18"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><i class="require">*</i>房租状态:</label>
            <div class="col-sm-8">
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" checked name="status" size="30" value="1"/><label>自住</label>
                </div>
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" name="status" size="30" value="2"/><label>出租</label>
                </div>
                <div class="col-sm-2 m-t2 lt">
                    <input type="radio" name="status" size="30" value="3"/><label>空置</label>
                </div>
            </div>
        </div>
        <div id="mTypeDiv" style="display:none">
            <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>租客姓名:</label>
            <div class="col-sm-8">
            <input class="form-control" name="renterName" id="renterName" value="${cRoom.renter_name}" size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>租客手机:</label>
            <div class="col-sm-8">
            <input class="form-control" name="renterTel" id="renterTel"  value="${cRoom.renter_tel}"size="30" />
            </div>
        </div>
         <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require"></i>租客身份证号码:</label>
            <div class="col-sm-8">
            <input class="form-control" name="renterIdNumber" id="renterIdNumber" value="${cRoom.renter_id_number}" size="30" maxlength="18"/>
            </div>
        </div>
        </div>
 	    <div class="jqGrid_wrapper" style="margin-left: 10%;margin-right: 5%;">
	        <div id="jqGrid_operation" class="jg-grid">
	            <div class="jqGrid_operation" id="action"></div>
	        </div>
	        <table id="jqGrid" ></table>
	    </div>
        
    </form>
</div>
<script type="text/javascript">
	 $('input:radio[name="status"]').change( function(){
	     	var selectedvalue = $("input:radio[name='status']:checked").val();
				if (selectedvalue == 2) {
					$("#mTypeDiv").attr("style","");
				} else {
					$("#mTypeDiv").attr("style","display:none");
				}
	  });
	    function refreshGrid() {
	        $("#jqGrid").trigger("reloadGrid");
	    }
	    
	 function addRow(){
     	var ids = 	$("#jqGrid").getDataIDs();
    	var length = ids.length;
    	var maxId = ids[length-1];
        $('#jqGrid').jqGrid('addRowData', maxId+1,
        		{ "SID":"-1", "UTYPE":"", "AUNMAE":"", "TEL":"", "AUNO":"", "SID":"-1"},
        		'after', maxId);//插入行		 
	 }
		function deleteUser(sid){
	        layer.confirm('确认删除所选择的记录', function (index) {
	            $.post("${pageContext.request.contextPath}/admin/croom_deleteUser.action", {
	                "sid": sid
	            }, function (result) {
	                result = eval("(" + result + ")");
	                layer.alert(result.msg);
	                refreshGrid();
	            });
	            layer.close(index);
	        });

		}
$(function () {
    $.jgrid.defaults.styleUI = "Bootstrap";
    $("#action").append("<a id=\"add\"><i class=\"glyphicon glyphicon-plus\"></i>添加住户</a>");
    $("#add").click(function () {
        layer.open({
            type: 2,
            title: ['添加住户', 'font-weight:bold'],
            shadeClose: true, //点击遮罩关闭层
            area: ['80%', '90%'],
            scrollbar: false,
            content: '${pageContext.request.contextPath}/admin/croom_addUserView.action?communityId=${communityId}&sid=${sid}',
            btn: ['提交', '取消'],
            yes: function (index, layero) {
                var options = {
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data.code == 1) {
                            layer.alert(data.msg, function () {
                                layer.closeAll();
                                refreshGrid();
                            });
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                };
                var iframeWin = window[layero.find('iframe')[0]['name']];
                if(iframeWin.result()){
                $("#layui-layer-iframe" + index).contents().find("#form").ajaxForm(options);
           		$("#layui-layer-iframe" + index).contents().find("#form").submit();  
                }else {
                	return false;
                }
            },
            cancel: function (index, layero) {
                layer.close(index);
            }
        });
    });   
    $("#jqGrid").jqGrid(
            {
                url: "${pageContext.request.contextPath}/admin/croom_listUser.action?sid=${sid}",
                mtype: 'POST',
                datatype: "json",
                altRows:false,
                height: 'auto',
                autowidth: true,
                shrinkToFit: true,
                colNames: ['序号', '住户类型', '住户姓名', '手机号码', '身份证号码', '操作'],
                colModel: [{
                    name: "SID",
                    index: "SID",
                    hidden: true
                }, {
                    name: 'UTYPE',
                    index: 'UTYPE',
                    width: 90,
                    align: 'center',
                    formatter: "select",
                    editoptions: {value: "-1:;3:自住;4:租客;"},
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        //合并单元格
                        return 'id=\'UTYPE' + rowId + "\'";
                    }
                }, {
                    name: 'AUNAME',
                    index: 'AUNAME',
                    width: 120
                }, {
                    name: 'TEL',
                    index: 'TEL',
                    width: 110
                }, {
                    name: 'AUNO',
                    index: 'AUNO',
                    width: 150
                },{
                    name: 'SID',
                    index: 'SID',
                    width: 60,
                    formatter: function (cellvalue, options, rawObject) {
                    	if(cellvalue == '-1'){
                         	return '';
                        }else{
                             return '<input type="button" style="padding: 2px 10px" class="btn btn-success" value="删除" onclick="deleteUser('
                                     + rawObject.SID + ')">';
                         }
                    }
                }],
                //sortname: 't.sid',
                //sortorder:'desc',
                rownumbers: false,
                jsonReader: {
                    root: 'rows',
                    page: "page",
                    total: 'total',
                    records: "records",
                    repeatitems: false
                },
                viewrecords: false,
                gridComplete: function() {
                    var gridName = "jqGrid";
                    Merger(gridName, 'UTYPE');
                },
                onSelectRow: function(id){
                    var data=$("#jqGrid").jqGrid('getRowData',id);//r为当前数据行
                    if(data.sid=='-1')
                    jQuery('#grid_id').editRow(id, true); 
                  }

                });
    function Merger(gridName, CellName) {
        //得到显示到界面的id集合
        var mya = $("#" + gridName + "").getDataIDs();
        //当前显示多少条
        var length = mya.length;
        for (var i = 0; i < length; i++) {
            //从上到下获取一条信息
            var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
            //定义合并行数
            var rowSpanTaxCount = 1;
            for (j = i + 1; j <= length; j++) {
                //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                if (before[CellName] == end[CellName]) {
                    rowSpanTaxCount++;
                    $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                } else {
                    rowSpanTaxCount = 1;
                    break;
                }
                $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
            }
        }
    }    
	if('${cRoom.status}' == ''){
		$("input[name='status'][value='1']").attr("checked", true);
		$("#mTypeDiv").attr("style","display:none");
	}else{
		$("input[name='status'][value='${cRoom.status}']").attr("checked", true);
		if('${cRoom.status}' != '2'){
	 	    $("#mTypeDiv").attr("style","display:none");
	    }else{
	    	$("#mTypeDiv").attr("style","");
		}
	}
    
	$.post("${pageContext.request.contextPath}/admin/cbuilding_list.action",{"communityId": '${communityId}'},function (data) {
        $("#cBuildingId").empty();
        $("#cBuildingId").append("<option value=''>请选择楼栋</option>");
        for (var i = 0; i < data.length; i++) {
            $("#cBuildingId").append("<option value='" + data[i].sid + "'>" + data[i].cbName + "</option>");
        }
	    $("#cBuildingId  option[value='${cRoom.buidingSid}'] ").attr("selected", true);  
        $("#cBuildingId").select2({
            "placeholder": "请选择楼栋",
            "width": "100%"
        })
       
         $("#cBuildingId").change(function () {
           	var data = $(this).val();
           	$.post("${pageContext.request.contextPath}/admin/cinstallunit_listUnit.action", {"bsid": data},function (data) {
	            $("#unitId").empty();
	            $("#unitId").append("<option value=''>请选择单元</option>");
	            for (var i = 0; i < data.length; i++) {
	                $("#unitId").append("<option value='"+data[i].SID+"'>"+data[i].CBNAME+"</option>");
	            }
	        	$("#unitId").select2({
	                "placeholder": "请选择单元",
	                "width": "100%"
	   	     	})
	        }, "json");
           })
    }, "json");

    
     $.post("${pageContext.request.contextPath}/admin/cinstallunit_listUnit.action", {"bsid": '${cRoom.buidingSid}'},function (data) {
        $("#unitId").empty();
        $("#unitId").append("<option value=''>请选择单元</option>");
        for (var i = 0; i < data.length; i++) {
            $("#unitId").append("<option value='"+data[i].SID+"'>"+data[i].CBNAME+"</option>");
        }
        $("#unitId  option[value='${cRoom.unitSid}'] ").attr("selected", true);  
        $("#unitId").select2({
            "placeholder": "请选择单元",
            "width": "100%"
	    })
     }, "json");

});
</script>
</body>
</html>
